<template>
  <div class="search-box">
    <ItSearch
      :search-title="title"
      shape="round"
      placeholder="请输入诉求名称进行检索"
      @onSearch="handleSearch"
    ></ItSearch>
  </div>
  <div class="search-box">
    <ItSearch
      :search-title="title"
      placeholder="请输入诉求名称进行检索"
      @onSearch="handleSearch"
    ></ItSearch>
  </div>
  <div>搜索内容：{{ title }}</div>
</template>
<script setup>
import { ref } from 'vue'
import { ItSearch } from '@/components'
const title = ref()
const handleSearch = (v) => {
  title.value = v.value
}
</script>
<style scoped>
.search-box {
  margin: 0 auto;
  margin-top: 22px;
  width: 512px;
  height: 46px;
  background: #ffffff;
  box-shadow: 0px 4px 6px rgba(32, 110, 242, 0.1);
  border-radius: 23px;
  margin-bottom: 20px;
}
</style>
